﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../assets/css/cropper.css">
    <link href="../lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="page-wrapper container-xl">
        <div class="row row-cards">
            <h4>　</h4>
            <h4>濮阳县招生考试中心【监考员登记】</h4>
            <h4>　</h4>
            <form>
                <div class="mb-3">
                    <label class="form-label">工作单位</label>
                    <input type="text" class="form-control" id="GZDW" name="GZDW" placeholder="请输入你的工作单位" value="濮阳县第一中学">
                </div>
                <div class="mb-3">
                    <label class="form-label">姓名</label>
                    <input type="text" class="form-control" id="XM" name="XM" placeholder="请输入姓名" value="@ViewBag.xm">
                </div>
                <div class="mb-3">
                    <label class="form-label">手机号</label>
                    <input type="text" class="form-control" id="SJH" name="SJH" placeholder="请输入11位手机号" value="@ViewBag.xm">
                </div>
                <div class="mb-3">
                    <label class="form-label">身份证号</label>
                    <input type="text" class="form-control" id="SFZ" name="SFZ" placeholder="请输入18位身份证号" value="@ViewBag.xm">
                </div>

                @*    <button type="button" onclick="saveinfo()" class="btn btn-primary">保存</button>*@
            </form>

            <br /> <button class="tan-up-btn" id="choose"> 选择要上传的文件</button>


            <div class="tan-show-option">
                <div class="container">
                    <img src="" alt="" id="image">
                </div>
                <div class="preview previewImg">
                    <img src="" id="imga" alt="" height="100%">
                </div>
                <button class="upload" id="CutImgEvent">上传图片</button>
                <input type="file" id="imgfile" accept="image/jpg,image/jpeg,image/png">
            </div>


            <script src="assets/js/jquery-2.1.1.js"></script>
            <script src="assets/js/cropper.min.js"></script>
            <script>

                $("#choose").click(function() {
                    $("#imgfile").click();
                    // alert("ggg");
                })


                var image = document.getElementById('image');
                var cropper, canvas;
                $('#imgfile').change(function(e) {
                    var file;
                    var files = e.target.files;
                    if (files && files.length > 0) {
                        file = URL.createObjectURL(files[0]);
                        $('#image').attr({ 'src': file })
                    }
                    if (cropper != undefined) {
                        cropper.destroy()
                    }
                    cropper = new Cropper(image, {
                        aspectRatio: 3 / 4,
                        background: true,  //是否显示网格背景
                        zoomable: true,   //是否允许放大图像
                        guides: true,   //是否显示裁剪框虚线
                        crop: function(event) { //剪裁框发生变化执行的函数。
                            canvas = cropper.getCroppedCanvas({  //使用canvas绘制一个宽和高200的图片
                                width: 300,
                                height: 400,
                            });
                            $('#imga').attr("src", canvas.toDataURL("image/png", 0.3))  //使用canvas toDataURL方法把图片转换为base64格式
                        }
                    });
                })
                $("#CutImgEvent").click(function() {
                    var sfzh = $("#sfzh").val();
                    var lxdh = $("#lxdh").val();
                    console.log($("#imga").attr("src"))
                    var formData = new FormData($("#registerForm")[0]);
                    formData.append("imgBase64", encodeURIComponent($("#imga").attr("src")));
                    formData.append("sfzh", sfzh);
                    $.ajax({
                        url: "../upload.php",
                        type: 'POST',
                        data: formData,
                        timeout: 10000,
                        async: true,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function(result) {
                            alert(result)
                        },
                        error: function(returndata) {
                            Alert.closedLoading()
                        }
                    })
                })

            </script>
        </div>
    </div>
</body>
</html>
